<template>
	<view class="moment-item animated  bounceInLeft">
		<view class="m-user f f-jsb">
			<view class="f-ac">
				<image class="user-logo" :src="moment.userpic" mode="widthFix" lazy-load></image>
				<view class="name">{{moment.username}}</view></view>
			<view class="f-ac"><view class="guanzhu f-ac" v-show="!moment.own.isfollow">
			<view class="iconfont icon-add"></view><view>关注</view>
			</view><view class="iconfont icon-del"></view></view>
		</view>
		<view class="m-info f-ac">{{moment.info}}</view>
		<view class="m-meta f-ajc">
			<image :src="moment.infopic" mode="scaleToFill" lazy-load></image>
			
			<block v-if="moment.infotype == 2">
				<view class="iconfont icon-Play f-ajc"></view>
				<view>{{moment.vedioshow}}次播放 {{moment.vediolong}}</view>
			</block>
		</view>
		<view class="m-share f-jsb">
			<view class="f">
				<view class="f-ac" :class="{active: moment.own.islike == 1}"><view class="iconfont icon-smile"></view><view>{{moment.thumb}}</view></view>
				<view class="f-ac" :class="{active: moment.own.islike == 2}"><view class="iconfont icon-artboardcopy2"></view><view>{{moment.down}}</view></view>
			</view>
			<view class="f">
				<view class="f-ac"><view class="iconfont icon-comment"></view><view>{{moment.commentnum}}</view></view>
				<view class="f-ac"><view class="iconfont icon-share"></view><view>{{moment.sharenum}}</view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			moment : {
				type: Object
			}
		},
		data() {
			return {
				/* moment: {
					userpic: "/static/test/logo.png",
					username: "卤打湿",
					info: "小程序通用能力，你一定用得上asdasdasdasdasdasdasdasd",
					infopic: "/static/test/banner.jpg", // info图片
					infotype: 1, // 1表示图片 2 表示视频,
					vedioshow: "20w", //展现了多少次
					vediolong: "2:47", // 视频多少秒
					thumb: 1000,
					down: 1000,
					commentnum: 100,
					sharenum: 100,
					own: {
						isfollow:  true, // 如果没有就全部登录就全部显示
						islike: 2, // 是否喜欢 0->没有操作 1-> 喜欢 2 -> 不喜欢
					}
				}, */
				
			};
		}
	}
</script>

<style scoped>
	.moment-item{
		margin: 0 20rpx ;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.1);
		margin-top: 24rpx;
	}
	.m-user .name {
		color: #999999;
		/* font-weight: 700; */
		font-size: 30rpx;
	}
	.m-user .user-logo {
		width: 110rpx;
		height: 110rpx;
		margin-right: 30rpx;
		border-radius: 100%;
	}
	.m-user .guanzhu {
		height: 50rpx;
		font-size: 12rpx;
		background-color: #f4f4f4;
		padding: 0 10rpx ;
		border-radius: 8rpx;
	}
	.m-user .guanzhu > view:nth-of-type(1){
		font-size: 22rpx;
		margin-right: 5rpx;
	}
	.m-user .guanzhu + view {
		margin-right: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #888888;
	}
	.moment-item > view {
		margin-top: 10rpx;
	}
	
	.m-info {
		font-size: 34rpx;
		margin:0 10rpx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.m-meta{
		position: relative;
	}
	.m-meta image, .m-meta view {
		position: absolute;
	}
	.m-meta view:first-of-type {
		background-color: rgba(0,0,0,0.3);
		width: 100%;
		height: 100%;
		color: #FFFFFF;
		font-size: 150rpx;
		border-radius: 22rpx;
	}
	
	.m-meta view:last-of-type {
		color: #FFFFFF;
		z-index: 1;
		bottom: 10rpx;
		right: 20rpx;
	}
	.m-meta,.m-meta image {
		width: 100%;
		height: 500rpx;
		border-radius: 22rpx;
	    box-shadow: 1rpx 1rpx 1rpx #888888;
	}
	
	.m-share view{
		margin-right: 10rpx;
	}
	
	.m-share {
		color: #aaaaaa;
	}
	.m-share view.active {
		color: #fee42b;
	}
	
	
</style>
